<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">新增</el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleRefresh">缓存刷新</el-button>
    </div>
    <tree-table :data="data" :eval-func="func" :eval-args="args" :expand-all="expandAll" border>
      <el-table-column label="学习类型名称">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{ scope.row.text }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="createChildren(scope.row)">新增子项</el-button>
          <el-button type="text" @click="update(scope.row)">修改</el-button>
          <el-button type="text" @click="remove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </tree-table>

    <save-jstudy :visible.sync="saveVisible" :jstudy-info="currentJStudyInfo"/>
  </div>
</template>

<script>
import treeTable from '@/components/TreeTable'
import treeToArray from './customEval'
import { selectTree, remove, refreshCache } from '@/api/JStudy'
import SaveJstudy from './Save'
export default {
  name: 'CustomTreeTableDemo',
  components: {
    SaveJstudy,
    treeTable
  },
  data() {
    return {
      currentJStudyInfo: {},
      saveVisible: false,
      func: treeToArray,
      expandAll: false,
      data: {},
      args: [null, null, 'timeLine']
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    remove(row) {
      this.$confirm('您确定删除该分类吗? 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ id: row.id }).then(res => {
          if (res.code === 200) {
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success'
            })
            this.query()
          } else {
            this.$alert({
              title: '失败',
              message: res.msg,
              type: 'success'
            })
          }
        })
      }).catch(() => {
        this.$notify({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    query() {
      selectTree().then(res => {
        this.data = res.data.children
      }).catch(e => {
        console.log(e)
      })
    },
    createChildren(row) {
      this.saveVisible = true
      this.currentJStudyInfo = {
        parentCode: row.code
      }
    },
    update(row) {
      this.saveVisible = true
      this.currentJStudyInfo = row
    },
    handleCreate() {
      this.saveVisible = true
      this.currentJStudyInfo = {
        parentCode: '-1'
      }
    },
    handleRefresh() {
      refreshCache().then(res => {
      })
    },
    message(row) {
      this.$message.info(row.event)
    }
  }
}
</script>
